<template>
  <div class="shop-change-warpper">
    <!-- 全部商品（此处暂不封装组件） -->
    <div class="cate-shop-warpper">
      <el-tabs v-model="pageInfo.activeName">
        <el-tab-pane label="1688精选" name="0">
          <div style="display: flex; " />
        </el-tab-pane>
        <el-tab-pane label="快手热销" name="1">快手热销</el-tab-pane>
        <el-tab-pane label="抖音爆款" name="2">抖音爆款</el-tab-pane>
      </el-tabs>
    </div>
    <!-- 全部商品（此处暂不封装组件） -->
    <div class="all-shop-warpper">
      <el-form
        ref="ruleform"
        :inline="true"
        :model="form"
        :rules="rules"
        class="demo-form-inline"
      >
        <el-form-item label="商品ID" prop="shopId">
          <el-input
            v-model="form.shopId"
            placeholder="请输入商品ID"
          />
        </el-form-item>
        <el-form-item label="商品编码" prop="shopCode">
          <el-input
            v-model="form.shopCode"
            placeholder="请输入商品编码"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleform')">提交</el-button>
          <el-button @click="resetForm('ruleform')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="all-shop-pagina">
      <el-pagination
        background
        :page-size="100"
        layout="total, prev, pager, next"
        :total="1000"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { copyTool } from '../../utils/tool'
import { getReduCateList } from '@/api/shop-center'
export default {
  data() {
    return {
      pageInfo: {
        activeName: 0
      },
      cateList: [],
      form: {
        user: '',
        region: ''
      },
      rules: {
        shopId: [
          { required: true, message: '请输入商品ID', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    getReduCateList({
      'type': 1,
      'pid': 0
    }).then(res => {
      console.log(res)
    })
    const result = {
      'data': {
        'succes': null,
        'categoryInfo': [
          {
            'categoryID': 0,
            'name': null,
            'level': null,
            'isLeaf': null,
            'parentIDs': null,
            'childIDs': null,
            'childCategorys': [
              {
                'id': 1769717,
                'name': '食品饮料',
                'categoryType': null
              },
              {
                'id': 1769718,
                'name': '日用百货',
                'categoryType': null
              },
              {
                'id': 1769719,
                'name': '服饰内衣',
                'categoryType': null
              },
              {
                'id': 1769720,
                'name': '鞋靴箱包',
                'categoryType': null
              },
              {
                'id': 1769721,
                'name': '珠宝饰品',
                'categoryType': null
              },
              {
                'id': 1769722,
                'name': '运动户外',
                'categoryType': null
              },
              {
                'id': 1769723,
                'name': '家居家纺',
                'categoryType': null
              },
              {
                'id': 1769724,
                'name': '家具建材',
                'categoryType': null
              },
              {
                'id': 1769725,
                'name': '礼品文创',
                'categoryType': null
              },
              {
                'id': 1769726,
                'name': '美妆护肤',
                'categoryType': null
              },
              {
                'id': 1769727,
                'name': '玩具乐器',
                'categoryType': null
              },
              {
                'id': 1769728,
                'name': '二手商品',
                'categoryType': null
              },
              {
                'id': 1769729,
                'name': '厨卫家电',
                'categoryType': null
              },
              {
                'id': 1769730,
                'name': '图书教育',
                'categoryType': null
              },
              {
                'id': 1769731,
                'name': '3C数码',
                'categoryType': null
              },
              {
                'id': 1769732,
                'name': '生鲜蔬果',
                'categoryType': null
              },
              {
                'id': 1769733,
                'name': '鲜花绿植',
                'categoryType': null
              },
              {
                'id': 1769734,
                'name': '母婴用品',
                'categoryType': null
              },
              {
                'id': 1769735,
                'name': '汽配摩托',
                'categoryType': null
              },
              {
                'id': 1769736,
                'name': '宠物用品',
                'categoryType': null
              },
              {
                'id': 1769737,
                'name': '钟表配饰',
                'categoryType': null
              },
              {
                'id': 1769738,
                'name': '医药保健',
                'categoryType': null
              },
              {
                'id': 1769739,
                'name': '本地生活',
                'categoryType': null
              },
              {
                'id': 1769740,
                'name': '奢侈品',
                'categoryType': null
              },
              {
                'id': 1769741,
                'name': '其他',
                'categoryType': null
              }
            ],
            'minOrderQuantity': null,
            'featureInfos': null,
            'categoryType': null,
            'isSupportProcessing': null
          }
        ],
        'errorMsg': null,
        'errorCode': null
      },
      'code': 200,
      'msg': '成功'
    }
    this.cateList = result?.data?.categoryInfo[0]?.childCategorys.map(item => ({
      label: item.name,
      value: item.id
    }))
    this.cateList.forEach(item => this.$set(item, 'active', false))
  },
  methods: {
    copy(val) {
      if (val) {
        copyTool(val)
        this.$message({ message: '复制成功', type: 'success' })
      } else {
        this.$message({ message: '无内容可复制', type: 'error' })
      }
    },
    submitForm(formName) {
      this.$refs[formName][0].validate((valid) => {
        if (valid) {
          // 调用查询接口
          console.log(this.form)
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName][0].resetFields()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-change-warpper {
  padding: 12px 20px 0;
  .cate-shop-warpper,
  .all-shop-warpper,
  .all-shop-pagina {
    padding: 0 20px;
    background: #fff;
    border-radius: 4px;
  }
  .cate-shop-warpper {
    padding: 10px 20px 20px;
  }
  .all-shop-warpper {
    margin-top: 20px;
    padding: 20px;
  }
  .all-shop-pagina {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
    height: 64px;
    ::v-deep {
      .el-pagination.is-background {
        .el-pager li {
          background-color: #fff;
          border: 1px solid rgba(0,0,0,0.15);
          &:not(.disabled).active {
            color: #fff;
            background-color: #1890ff;
            border: none;
          }
        }
      }
      .btn-prev,
      .btn-next {
          background-color: #fff;
          border: 1px solid rgba(0,0,0,0.15);
      }
    }
  }
}
</style>
